import React from 'react'
import { NOCLASS, useBudgets } from '../context/BudgetsContext'
import BudgetCard from './BudgetCard'

export default function NoclassBudgetCard(props) {
  const { getBudgetExpenses } = useBudgets(); 
  const amount = getBudgetExpenses(NOCLASS).reduce((total, expense) => total+expense.amount,0)

  if(amount === 0) return null;

  return (
    <BudgetCard name="未分类" grey amount={amount} {...props}/>
  )
}
